<template>
  <div class="register-page">
    <van-nav-bar
      title="面经注册"
    />
    <!-- @submit 事件：当点击表单容器内部的 submit 类型的按钮时会触发 -->
    <!-- 说明：当表单校验不通过时，不会触发 submit -->
    <van-form @submit="onSubmit">
      <!-- rules 配置校验规则，数组，可配多个规则 -->
      <!-- pattern 可以配置正则规则，\w 预定义字符类: 表示由 字母、数字、下划线 组成 -->
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          { pattern: /^\w{5,12}$/, message: '用户名长度为：5~12 个字符' }
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,16}$/, message: '密码长度为：6~16 个字符' }
        ]"
      />
      <div style="margin: 16px;">
        <van-button block type="primary" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <RouterLink class="link" :to="{ name: 'LoginPage' }">有账号，去登录</RouterLink>
  </div>
</template>

<script>

// 在网络请求中，有两个关键的码：
//   1. 网络请求的【响应状态码】：标记这次网络请求的响应状态，是 HTTP 协议固定的
//     1.1 常见的状态码：2xx 成功，3xx 重定向，4xx 客户端错误，5xx 服务端错误
//     1.2 对于客户端（浏览器）而言，当网络请求的响应状态码为 4xx 或者 5xx 时，就判定为请求失败，会抛出异常
//   2. 后端接口返回的响应数据中的【业务状态码】：标记这次是请求的业务在后端是否处理成功
//     2.1 不同项目的后端接口的业务状态码不一定一样，会有一个码表对照

// 综上所述，结论：
// 1. 网络请求成功，业务不一定成功
// 2. 网络请求失败，业务一定失败，客户端会抛出异常，需要 try...catch 捕获异常

// 面经h5 接口设计逻辑：
// - 业务成功，响应状态码就是 2xx
// - 业务不成功，响应状态码就是 4xx 或者 5xx，对于前端来说，就是请求失败，就会抛异常

// 补充说明：有一些后端接口，无论业务是否成功，响应状态码都会无脑返回 2xx，此时，对于客户端而言，请求都是成功的，一定不会抛异常，所以，就需要根据业务状态码来区分是否成功

// import request from '@/utils/request.js'
import { register } from '@/api/user.js'
// import { Toast } from 'vant'

export default {
  name: 'RegisterPage',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async onSubmit (values) {
      // 能够执行到这个函数内部，就说明表单数据校验已经通过了
      // console.log('submit', values)
      // try {
      // await request({
      //   method: 'POST',
      //   url: '/h5/user/register',
      //   data: values
      // })
      // await register(values.username, values.password)
      await register(values)
      // 基于现有的后端接口设计，只要能走到这里，业务就成功了
      // Toast('注册成功')
      this.$toast('注册成功')

      // Vant Toast（轻提示）组件的使用：
      // 1. 在 *.vue 组件中，直接使用 this.$toast('xxx')
      // 2. 在 *.js 文件中，先导入 Toast 函数，然后再调用 Toast('xxx')

      this.$router.push({ name: 'LoginPage' })
      // } catch (err) {
      //   // 请求失败
      //   console.log(err, '页面上的catch')
      //   // Toast(err.response.data.message)
      //   this.$toast(err.response.data.message)

      //   // Toast 组件在多次调用时，只会显示最后一次，前面的会覆盖掉
      //   // this.$toast(1)
      //   // this.$toast(2)
      //   // this.$toast(3)
      //   // this.$toast(4)
      //   // this.$toast(5)
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</style>
